<template>
  <div>
    <!-- <h3>淞桑开的黑店</h3>

    <current-demo :person="obj"></current-demo>
    <p>这是父组件中的数据-obj - {{ obj }}</p> -->

    <hr>
    <!-- 
        父传子：
        1. 父组件通过给子组件，添加标签属性传值 
        2. 子组件通过props属性接收
     -->
    <my-product 
      v-for="item in list"
     :key="item.id"
     :title="item.title"
     :price="item.price"
     :desc="item.desc"
     :pid="item.id"
     @cut="updatePrice"
     >
    </my-product>
    <!-- 对应关系，子组件中的props对应父组件my-product :属性名 -->
    
  </div>
</template>

<script>

import MyProduct from './components/MyProduct.vue'
import CurrentDemo from './components/01.如果不遵循单向数据流-demo.vue'
export default {
  data(){
    return {
      list: [
        { id: 1, title: '无敌猪肘子', price: 188, low:120, desc:'绝了' },
        { id: 2, title: '爽口大西瓜', price: 360, low:330, desc:'太贵了'},
        { id: 3, title: '美味大闸蟹', price: 42,low:30, desc:'太假了' }
      ],
      obj:{
        name:'小淞',
        age:18
      }
      // 想要子组件使用父组件中的data数据
    }
  }, 
  methods:{
    updatePrice(price, id){
      console.log(`让id为${id}的商品价格砍${price}元`)
      const goods = this.list.find(el => el.id === id)
      // console.log(goods)

      // 在父组件中有了这一个函数，可以自己控制自己的数据变量
      if (goods.price - price > goods.low){
        goods.price -= price
      } else {
        return alert('大兄弟呀，砍骨折了，不能再砍了')
      }

    }
  },
  // 组件导入
  components:{
    // "组件名":组件对象
    // 组件名，=> 推荐大驼峰
    MyProduct,
    // CurrentDemo
  }
}
</script>

<style>

</style>